<template>
	<div class="maintain-page" style="padding: 20px;">
		<el-row justify="space-between" align="middle" style="margin-bottom: 16px;">
			<el-col>
				<el-button type="primary" size="small" @click="openDialog()">新增维护记录</el-button>
				<el-button type="success" size="small" @click="exportExcel">导出记录</el-button>
			</el-col>
			<el-col>
				<el-input v-model="searchKeyword" size="small" placeholder="搜索设备/内容..." clearable />
			</el-col>
		</el-row>

		<el-table :data="filteredRecords" border stripe style="width: 100%">
			<el-table-column prop="date" label="日期" width="120" />
			<el-table-column prop="device" label="设备名称" width="140" />
			<el-table-column prop="location" label="位置" width="140" />
			<el-table-column prop="content" label="维护内容" />
			<el-table-column prop="person" label="维护人" width="100" />
			<el-table-column prop="status" label="状态" width="100">
				<template #default="{ row }">
					<el-tag :type="row.status === '完成' ? 'success' : 'warning'">{{ row.status }}</el-tag>
				</template>
			</el-table-column>
			<el-table-column label="操作" width="160">
				<template #default="{ $index }">
					<el-button type="primary" text @click="openDialog($index)">编辑</el-button>
					<el-button type="danger" text @click="deleteRecord($index)">删除</el-button>
				</template>
			</el-table-column>
		</el-table>

		<!-- 弹窗 -->
		<el-dialog v-model="dialogVisible" :title="editingIndex === null ? '新增维护记录' : '编辑维护记录'" width="500px">
			<el-form :model="form" label-width="100px">
				<el-form-item label="日期">
					<el-date-picker v-model="form.date" type="date" value-format="YYYY-MM-DD" style="width: 100%" />
				</el-form-item>
				<el-form-item label="设备名称">
					<el-select v-model="form.device" filterable placeholder="请选择设备">
						<el-option v-for="item in devices" :key="item" :label="item" :value="item" />
					</el-select>
				</el-form-item>
				<el-form-item label="位置"><el-input v-model="form.location" /></el-form-item>
				<el-form-item label="维护内容"><el-input v-model="form.content" type="textarea" rows="2" /></el-form-item>
				<el-form-item label="维护人"><el-input v-model="form.person" /></el-form-item>
				<el-form-item label="状态">
					<el-select v-model="form.status">
						<el-option label="完成" value="完成" />
						<el-option label="进行中" value="进行中" />
					</el-select>
				</el-form-item>
			</el-form>
			<template #footer>
				<el-button @click="dialogVisible = false">取消</el-button>
				<el-button type="primary" @click="saveRecord">保存</el-button>
			</template>
		</el-dialog>
	</div>
</template>

<script setup>
import { ref, reactive, computed } from 'vue'
import { ElMessage } from 'element-plus'
import * as XLSX from 'xlsx'

const searchKeyword = ref('')
const dialogVisible = ref(false)
const editingIndex = ref(null)

const devices = ['空调', '照明', '电梯', '新风', '插座', '洗手间', '饮水机', '加湿器', '锅炉', '燃气灶', '热水器']

const records = ref([])
const persons = ['李明', '王强', '张敏', '赵雷', '陈芳']
const contents = ['更换部件', '软件升级', '系统检查', '清洁维护', '线路检修']
for (let i = 0; i < 15; i++) {
	const device = devices[i % devices.length]
	const person = persons[i % persons.length]
	const content = contents[i % contents.length]
	records.value.push({
		date: `2024-04-${String((i % 28) + 1).padStart(2, '0')}`,
		device,
		location: `${String.fromCharCode(65 + (i % 3))}栋${(i % 5) + 1}层`,
		content,
		person,
		status: i % 2 === 0 ? '完成' : '进行中'
	})
}

const form = reactive({
	date: '',
	device: '',
	location: '',
	content: '',
	person: '',
	status: '进行中'
})

const filteredRecords = computed(() =>
	records.value.filter(r =>
		!searchKeyword.value ||
		r.device.includes(searchKeyword.value) ||
		r.content.includes(searchKeyword.value)
	)
)

function openDialog(index = null) {
	if (index !== null) {
		Object.assign(form, records.value[index])
	} else {
		Object.assign(form, {
			date: '', device: '', location: '', content: '', person: '', status: '进行中'
		})
	}
	editingIndex.value = index
	dialogVisible.value = true
}

function saveRecord() {
	if (editingIndex.value === null) {
		records.value.push({ ...form })
		ElMessage.success('新增成功')
	} else {
		records.value[editingIndex.value] = { ...form }
		ElMessage.success('修改成功')
	}
	dialogVisible.value = false
}

function deleteRecord(index) {
	records.value.splice(index, 1)
	ElMessage.success('已删除')
}

function exportExcel() {
	const rows = [['日期', '设备名称', '位置', '维护内容', '维护人', '状态']]
	records.value.forEach(r =>
		rows.push([r.date, r.device, r.location, r.content, r.person, r.status])
	)
	const ws = XLSX.utils.aoa_to_sheet(rows)
	const wb = XLSX.utils.book_new()
	XLSX.utils.book_append_sheet(wb, ws, '维护记录')
	XLSX.writeFile(wb, '维护记录.xlsx')
}
</script>

<style scoped>
.maintain-page {
	max-width: 1200px;
	margin: auto;
}
</style>
